<template>
	<tm-fullView>
		<template v-slot:default="{info}">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
				<tm-menubars title="布局row/col" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
				
				
				<tm-sheet :shadow="24" :padding="[0,0]">
					<view class="pb-32 pl-32 pt-24 text-size-xs">下面是使用tm-row tm-col制作一个简单的表格</view>
					<tm-row>
						<tm-col v-for="item in 6" :key="item" color="blue text-weight-b text-size-xs" :grid="2">
							<view class="py-10">{{item}}</view>
						</tm-col>
					</tm-row>
					<tm-row v-for="item in 4" :key="item">
						<tm-col   v-for="(item2,index) in 6" :key="item2" :color="item%2?'':'green text '" :grid="2">
							<view class="py-10 text-size-xs">{{index}}列</view>
						</tm-col>
					</tm-row>
					
				</tm-sheet>
				<tm-sheet :shadow="24">
					<view class="py-32 text-size-xs">tm-col组件可以单独使用，tm-row不能单独使用</view>
					<tm-col :grid="2" color="blue">
						<view class="py-10">{{2}}</view>
					</tm-col>
					<tm-col :grid="4"  color="green">
						<view class="py-10">{{4}}</view>
					</tm-col>
					<tm-col :grid="6" color="red">
						<view class="py-10">{{6}}</view>
					</tm-col>
				</tm-sheet>
			</view>
		</template>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmCol from "@/tm-vuetify/components/tm-col/tm-col.vue"
	import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmRow,tmCol},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
